<template>
    <div>
    <el-button type="success " @click="open">添加</el-button>
       <!-- 查询 -->
       <el-form :inline="true" :model="formInline" class="demo-form-inline" style="display: inline-block; margin-left: 800px;">
        <el-form-item label="">
            <el-input v-model="formInline.deptName" placeholder="部门名"></el-input>
        </el-form-item>
        <el-form-item label="" style="display: inline-block;">
        <template>
            <el-select v-model="formInline.parentId" clearable  placeholder="所属部门">
                <el-option
                v-for="item in selectData"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select>
        </template>
    </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="sureSubmit">查询</el-button>
            </el-form-item>   
    </el-form>
      <!-- 查询 -->
       <el-table
     :data="tableData"
     style="width: 100%">
     <el-table-column label="部门id" width="180">
       <template slot-scope="scope">
         <span style="margin-left: 10px">{{ scope.row.id }}</span>
       </template>
     </el-table-column>
     <el-table-column label="部门名" width="180">
       <template slot-scope="scope">
         <span style="margin-left: 10px">{{ scope.row.name }}</span>
       </template>
     </el-table-column>
     <el-table-column label="上级部门" width="180">
       <template slot-scope="scope">
         <span style="margin-left: 10px">{{ scope.row.parent!=null?scope.row.parent.name: null}}</span>
       </template>
     </el-table-column>
     <el-table-column label="操作">
       <template slot-scope="scope">
         <el-button
           size="mini"
           @click="handleEdit(scope.row)">编辑</el-button>
         <el-button
           size="mini"
           type="danger"
           @click="handleDelete(scope.row.id)">删除</el-button>
       </template>
     </el-table-column>
   </el-table>
   <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20,40]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="allTatol">
    </el-pagination>
   </div>
    <!-- 模态框添加与修改操作 -->
    <el-dialog :title="tishi" :visible.sync="dialogVisible" width="30%">
       <el-form ref="form" :model="form" label-width="80px">
   <el-form-item label="部门名">
     <el-input v-model="form.name"></el-input>
   </el-form-item>
   <el-form-item label="父部门">
    <el-select v-model="form.parentId" placeholder="请选择父部门">
     <el-option
       v-for="item in selectData"
       :key="item.id"
       :label="item.name"
       :value="item.id">
     </el-option>
   </el-select>
   </el-form-item>
  
   <el-form-item>
     <el-button type="primary" @click="onSubmit">{{tishi}}</el-button>
     <el-button @click="dialogVisible=false">取消</el-button>
   </el-form-item>
     </el-form>
     </el-dialog>
    </div>
 </template>
 <script>
 export default {
    data() {
      return {
       dialogVisible:false,
       tishi:"",
       form:{},
       tableData:[],
       selectData:[],
       currentPage:1,
       pageSize:5,
       allTatol:0,
       path:"http://localhost:8080/",
       formInline:{},
      }
    },
    methods: {
      getList(){
       this.$axios.get(`${this.path}dept/${this.currentPage}/${this.pageSize}`).then(res=>{
         this.tableData=res.data.data.pageInfo.list;
         this.allTatol=res.data.data.pageInfo.total;
         this.selectData=res.data.data.deptList;
       })
      },
      sureSubmit(){
        this.$axios.post(`${this.path}dept/other`,this.formInline).then(res=>{
            this.tableData=res.data.data.list;
            this.allTatol=res.data.data.total;
        })
      },
      handleSizeChange(val) {
       this.pageSize=val;
       this.getList();
         //console.log(`每页 ${val} 条`);
       },
       handleCurrentChange(val) {
         this.currentPage=val;
         this.getList();
         // console.log(`当前页: ${val}`);
       },

       handleEdit(dept){
         this.tishi="修改";
         let deptJson = JSON.stringify(dept);            
         this.form=JSON.parse(deptJson);
             this.dialogVisible=true;
       },
       open(){
        this.form={};
        this.tishi="添加";
        this.dialogVisible=true;
       },
       onSubmit(){
         if( this.tishi=="修改"){
           this.$axios.put(`${this.path}dept`,this.form).then(res=>{
             if(res.data.code==200){
               this.dialogVisible=false;
                 this.$message.success(res.data.msg);
                 this.form={};
                 this.getList();
                 }else{
                   this.dialogVisible=false;
                   this.$message.error(res.data.msg);
                 }           
           });
         }else{
            this.$axios.post(`${this.path}dept`,this.form).then(res=>{
                if(res.data.code==200){
                    this.dialogVisible=false;
                    this.$message.success(res.data.msg);
                    this.form={};
                    this.getList();
                 }else{
                   this.dialogVisible=false;
                   this.$message.error(res.data.msg);
                 }                     
            });
         }
       },
       handleDelete(id){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(() => {
          this.$axios.delete(this.path+"dept/"+id).then(res=>{
              if(res.data.code==200){
                this.dialogVisible=false;
                this.$message.success(res.data.msg);
                this.getList();
                }else{
                  this.dialogVisible=false;
                  this.$message.error(res.data.msg);
                }
            });
            }).catch(() => {
              this.$message({
              type: 'success',
              message: '取消删除'
            });          
          }); 
      },
    },
   
    mounted() {
     this.getList();
    },
 };
 </script>
 <style  scoped>
 </style>